<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/vue.js"></script>
	<script src="js/words.js"></script>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }

    ul {
        display: flex;
        justify-content: center;
    }

    li {
        width: 70px;
        height: 70px;
        border: 1px solid #168;
        background: #694;
        border-radius: 7px;
        text-align: center;
        line-height: 70px;
        box-shadow: 5px 5px 5px #a0913d;
        transition: .3s;
    }

   .act {
        background-color: yellow;
        border: none;
        color: #844;
    }

   .act1 {
        background-color: greenyellow;
        color: #489;
    }
</style>

<body>
    <div id='app'>
        <ul>
            <li v-for="(item,index) in ques" :class="index<count? 'act1': ''">{{item}}</li>
        </ul>
        <ul v-for="(row,i) in keys">
            <li v-for="(col,j) in row" :class="col == key.toUpperCase()? 'act':''">{{col}}</li>
        </ul>
		<h1>{{key}}</h1>
    </div>
    <script>
    			Vue.createApp({
    				data() {
    					return{
    						ques:['A','D','R','Y'],
    						keys:[
    							['Q','W','E','R','T','Y','U','I','O','P'],
    							['A','S','D','F','G','H','J','K','L'],
    							['Z','X','C','V','B','N','M']
    						],
    						key:'',
    						count:0
    					}
    				},
    				mounted() {
    					document.addEventListener('keydown',this.press)
    				},
    				methods:{
    					press(event){
    						this.key=event.key
    						if (this.key == this.ques[this.count]) {	//判断字母
    							this.count++
    							if (this.count == this.ques.length) {
    								this.count=0
    								let i=Math.floor(Math.random()*words.length)
    								this.ques=words[i].split('')
    							}
    						}
    					}
    				}
    			}).mount('#app')
    		</script>
</body>

</html>